
    body {
        background-color: #FAFAFA;
        font-family: 'Nunito', sans-serif;
        padding-top: 50px;}



    h1,h2,h3,h4,h5,h6{
        font-family: 'Raleway', sans-serif; }

    a,p {
        color: #4b5156
    }

    a {
        font-weight: 600;
    }

    .container {
        max-width: 550px;
        margin: auto;
        background-color: #fff;
        -webkit-box-shadow: 2px 2px 13px -4px rgba(0, 0, 0, 0.21);
        box-shadow: 4px 4px 200px -4px rgba(0, 0, 0, 0.21);
    }

    input {
        outline: none;
        border: none;
    }

    .header-bar {
        display: flex;
        justify-content: space-between;
        color: #fff;
        padding: 10px;
        border-radius: 5px 5px 0 0;
        background: linear-gradient(90deg, #7DD892 0%, #5FC87D 43%, #5FC87D 100%);


    }

    .header-bar a {
        color: rgb(247, 247, 247);
        text-decoration: none;
    }

    .task-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        border-top: 1px solid #dfe4ea;
        overflow: hidden;
    }

    .task-title {
        display: flex;
        padding: 20px;
    }

    .task-title a {
        text-decoration: none;
        color: #4b5156;
        margin-left: 10px;
    }

    .task-absent-icon {
        height: 20px;
        width: 20px;
        background-color: #fc0000;
        border-radius: 50%;
    }

    .task-present-icon {
        height: 20px;
        width: 20px;
        background-color: rgb(46, 207, 5);
        border-radius: 50%;
    }
    .task-empty-icon {
        height: 20px;
        width: 20px;
        background-color: rgb(42, 5, 207);
        border-radius: 50%;
    }


    .delete-link {
        text-decoration: none;
        font-weight: 900;
        color: #ce3a3a;
        font-size: 22px;
        line-height: 0;
        padding: 20px 0px;
    }

  
    .handle {
        display: inline-block;
        padding: 20px 16px;
        cursor: grab;
        user-select: none;
    }

    .handle:after,
    .handle:before {
        display: block;
        content: "";
    }

    .handle:active,
    .handle:active:before,
    .handle:active:after {
        cursor: grabbing;
    }

    .dropArea {
        background-color: #f1f2f6;
        color: black;
        border: #ced6e0 1px solid;
    }

    .selectedTask {
        opacity: 0.6;
    }


    #add-link {
        color:#ce3a3a;
        text-decoration: none;
        font-size: 42px;
        text-shadow: 1px 1px #81413b;
    }

    #search-add-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
    }

    @media screen and (max-width:320px) {
        #search-add-wrapper {
            padding: 10px;
        }
    }

    input[type=text],
    input[type=password],
    textarea {
        border: 1px solid #757575;
        border-radius: 5px;
        padding: 10px;
        width: 90%;
    }

    label {
        padding-top: 10px !important;
        display: block;
    }

    ::placeholder {
        font-weight: 300;
        opacity: 0.5;
    }

    .button {
        border: 1px solid #757575;
        background-color: #FFF;
        color:#2f6940;
        padding: 10px;
        font-size: 14px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
    }

    .card-body {
        padding: 20px;
    }
